<template>
  <div class="article-view">
    <div class="main-content">
      <ArticleContent />
      <ArticleComments />
    </div>
    <div v-if="loading" class="loading">
      <i class="fas fa-spinner fa-spin"></i>
      加载中...
    </div>
  </div>
</template>

<script setup>
import ArticleContent from '../components/ArticleContent.vue'
import ArticleComments from '../components/ArticleComments.vue'
</script>

<style scoped>
.article-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 32px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: var(--text-light);
}

.loading i {
  margin-right: 8px;
}
</style>